<template>
	<view class="container">
		<view class="content-wrap">
			<view class="item-box" v-for="item in listData" :key="item.id">
				<view class="left">
					<image class="img-avatar" :src="item.user_avatar" mode=""></image>
					<view class="info">
						<view class="name">
							{{item.nick_name}}
						</view>
						<view class="message">
							{{item.reply_reaon||'暂无消息'}}
						</view>
						<view class="date-time">
							{{item.created_time}}
						</view>
					</view>
				</view>
				<!--  -->
				<view class="right" v-if="item.status == 0">
					<u-button shape="circle"
						:customStyle="{width:'120rpx',height:'52rpx',fontSize:'32rpx',marginBottom:'24rpx'}"
						type="primary" text="通过" @click="onInterest(1,item)"></u-button>
					<u-button shape="circle" :customStyle="{width:'120rpx',height:'52rpx',fontSize:'32rpx'}" text="驳回"
						@click="onInterest(0,item)"></u-button>
				</view>
				<view v-else class="right" :style="item.status == 1?'color: #68B0FC;':''">
					{{['','已通过','已驳回'][item.status]}}
				</view>
			</view>
			<u-loadmore :status="refreshStatus" />
		</view>

		<view>
			<u-popup :show="modalShow" mode="bottom" @close="modalShow = false">
				<view class="popup-wrap">
					<view class="popup-header">
						<text style="flex: 1;">驳回原因</text>
						<u-button shape="circle" :customStyle="{width:'176rpx',height:'64rpx',fontSize:'32rpx'}"
							type="primary" text="发送" @click="onSubMit"></u-button>
					</view>
					<view class="content-box">
						<u--textarea :border="false" v-model="reason" placeholder="请输入驳回理由"></u--textarea>
					</view>
				</view>
			</u-popup>
		</view>

	</view>
</template>

<script>
	import Refresh from '@/mixins/refresh'
	export default {
		mixins: [Refresh],
		components: {},
		data() {
			return {
				scrollTop: 0,
				modalShow: false,
				listData: null,
				reason: '',
				selItem: null
			}
		},
		onLoad() {
			this.getList(false);
		},
		methods: {
			// 审核列表
			getList(status) {
				this.$Net.get(this.$api.user_group_list_audi, {
					page: 1,
					limit: 20
				}).then(res => {
					this.setStatus(res.count, res.list, status);
				})
			},
			upper() {
				console.log('upper');
			},
			lower() {
				console.log('lower');
			},
			scroll() {
				console.log('scroll');
			},
			// user_group_list_audi
			onSubMit() {
				if (this.selItem) {
					this.modalShow = false;
					this.$Net.post(this.$api.user_group_refuse, {
						id: this.selItem.id,
						reason: this.reason
					}, 1).then(res => {
						this.reason = ''
						this.getList(false);
					})
				}
			},
			onInterest(index, item) {
				if (index == 1) {
					// user_group_agree
					this.$Net.post(this.$api.user_group_agree, {
						id: item.id,
						group_id: item.group_id
					}, 1).then(res => {
						this.getList(false);
					})
				} else {
					this.selItem = item;
					this.modalShow = true;
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.content-wrap {
			padding-top: 28rpx;
			padding-bottom: 40rpx;
			padding-bottom: calc(40rpx + constant(safe-area-inset-top));
			padding-bottom: calc(40rpx + env(safe-area-inset-top));
		}

		.item-box {
			display: flex;
			justify-content: space-between;
			margin-bottom: 50rpx;

			.left {
				display: flex;
				flex: 1;

				.img-avatar {
					width: 72rpx;
					height: 72rpx;
					margin-right: 14rpx;
					border-radius: 72rpx;
					flex-shrink: 0;
				}

				.name {
					color: rgba(0, 0, 0, 0.40);
					font-family: "PingFang SC";
					font-size: 28rpx;
				}

				.message {
					color: rgba(0, 0, 0, 0.80);
					font-family: "PingFang SC";
					font-size: 32rpx;
					margin-top: 6rpx;
					margin-bottom: 10rpx;
				}

				.date-time {
					color: rgba(0, 0, 0, 0.40);
					font-family: "PingFang SC";
					font-size: 28rpx;
					font-weight: 400;

				}
			}

			.right {
				flex-shrink: 0;
			}

		}

		::v-deep .u-popup__content {
			border-radius: 20px !important;
		}
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 20rpx;
		width: 100%;
	}

	.content-box {
		padding: 0 40rpx;
		margin-bottom: calc(40rpx + constant(safe-area-inset-top));
		margin-bottom: calc(40rpx + env(safe-area-inset-top));

		::v-deep .u-textarea {
			border-radius: 24rpx;
			background: #F1F1F1;
		}
	}
</style>